{% extends 'base_backend.html' %}
{% load static %}
{% load my_filter %}

{% block header_tail %}
<link rel="stylesheet" href="{% static 'zhongbao/zhongbao_admin/css/style.css' %}">
<link rel="stylesheet" href="{% static 'zhongbao/zhongbao_admin/css/iconfont.css' %}">
<link rel="stylesheet" href="{% static 'plugins/datatables/dataTables.bootstrap.css' %}">
<link rel="stylesheet" href="{% static 'public/ComboSelect/css/combo.select.css' %}">
<link rel="stylesheet" href="{% static 'zhongbao/config/css/main.css' %}">
<link rel="stylesheet" href="{% static 'laydate/theme/default/laydate.css' %}">

<script src="{% static 'laydate/laydate.js' %}"></script>
<script src="{% static 'plugins/jQuery/jquery-2.2.3.min.js' %}"></script>
<script src="{% static 'plugins/vue1/vue.js' %}"></script>
<style>
    .pmark_color {
        display: inline-block;
        width: 100px;
        height: 15px;
        margin-right: 2%;
    }

    .tr_sign_red {
        background-color: red !important;
    }

    .tr_sign_ForestGreen {
        background-color: ForestGreen !important;
    }

    .tr_sign_BlueViolet {
        background-color: BlueViolet !important;
    }

    .tr_sign_Aqua {
        background-color: Aqua !important;
    }

    .tr_sign_Darkorange {
        background-color: Darkorange !important;
    }
</style>
{% endblock header_tail %}

{% block section_content %}
<div>
    <div class="box-header with-border">
        <h3 class="box-title">项目统计</h3>
    </div>
    <!-- form start -->
    <div class="box box-primary">
        <div class="box-header with-border" style="border-color: #1b6d85">
            <!-- Date range -->
            <form role="form" id="searchForm" method="get" action="">
                <div style="width: 95%; float: left;">
                    <div style="float: left;" class="input-group select-config-div">
                        <label for="project_id" class="control-label">项目ID：</label>
                        <input id="project_id" type="text" name="project_id" class="config-input" autocomplete="off"
                               value="{{ project_id|default:'' }}">
                    </div>
                    <div style="float: left;" class="input-group select-config-div">
                        <label for="project_name" class="control-label">项目名称：</label>
                        <input id="project_name" type="text" name="project_name" class="config-input" autocomplete="off"
                               value="{{ projectName|default:'' }}">
                    </div>
                    <div class="input-group select-config-div" style="float: left; ">
                        <label for="allocation_flag" class="control-label">分配时间：</label>
                        <p><input type="text" name="allocation_flag" class="config-input" id="allocation_flag"
                                  lay-key="1" autocomplete="off" value="{{ allocation_flag|default:'' }}"></p>
                    </div>
                    {% if user.is_superuser %}
                    <div style="float: left;" class="input-group select-config-div">
                        <label for="agency_id" class="control-label">代理机构：</label>
                        <select name="agency_id" class="config-input">
                            <option value="">---------</option>
                            {% for agency in agency_list %}
                            {% if agency.id == agency_id %}
                            <option selected="selected" value="{{ agency.id }}">{{ agency.agent_name }}</option>
                            {% else %}
                            <option value="{{ agency.id }}">{{ agency.agent_name }}</option>
                            {% endif %}
                            {% endfor %}
                        </select>
                    </div>
                    {% endif %}
                    <div style="float: left;" class="input-group select-config-div">
                        <label for="pstatus_id" class="control-label">项目状态：</label>
                        <select name="pstatus_id" class="config-input">
                            <option value="">---------</option>
                            {% for pstatus in pstatus_list %}
                            {% if pstatus.pstatus_id == pstatus_id %}
                            <option selected="selected" value="{{ pstatus.pstatus_id }}">{{ pstatus.pstatus_name }}
                            </option>
                            {% else %}
                            <option value="{{ pstatus.pstatus_id }}">{{ pstatus.pstatus_name }}</option>
                            {% endif %}
                            {% endfor %}
                        </select>
                    </div>
                    <div style="float: left;" class="input-group select-config-div">
                        <label for="pageSize" class="control-label">每页显示：</label>
                        <select name="pageSize" id="showNumSelect" class="config-input">
                            {% for i in limits %}
                            {% if i == pageSize %}
                            <option selected="selected" value="{{ i }}">{{ i }}条</option>
                            {% else %}
                            <option value="{{ i }}">{{ i }}条</option>
                            {% endif %}
                            {% endfor %}
                        </select>
                    </div>
                </div>
                <div class="input-group" style="width: 5%; float: right; margin-top: 70px;">
                    <input type="submit" class="form-control pull-left btn btn-sm btn-primary" value="检索">
                </div>
            </form>
        </div>

        <!-- 展示搜索出来的任务 -->
        <div id="main">
            <div id="showMessage"></div>
            <div class="box-body">
                <form id="model_form" role="form" method="post">{% csrf_token %}
                    <div class="group">
                        {% if user.is_superuser %}
                        <a class="btn btn-info btn-xs" data-toggle="modal" data-target="#pmark">标记</a>
                        <a class="btn btn-info btn-xs" onclick="projectMark(0)">清除标记</a>
                        <a class="btn btn-info btn-xs" onclick="projectMark(2)">清除全部标记</a>
                        {% else %}
                        <a class="btn btn-info btn-xs" data-toggle="modal" data-target="#pmark">说明</a>
                        {% endif %}
                        <span>共 <b>{{ project_count }}</b> 个项目</span>
                        <table id="task_each_table" border="1" class="table table-bordered table-hover table-striped">
                            <thead>
                            <tr>
                                <th class="action-checkbox">
                                    <input type="checkbox" name="th_checkbox_all" onclick="checkAll(this)">
                                </th>
                                <th>
                                    <span style="float: left">
                                        项目ID
                                    </span>
                                </th>
                                <th>
                                    <span style="float: left">
                                        项目名称
                                    </span>
                                </th>
                                <th>
                                    <span style="float: left">
                                        总量
                                    </span>
                                </th>
                                <th>
                                    <span style="float: left">
                                        已回收
                                    </span>
                                </th>
                                <th>
                                    <span style="float: left">
                                        待分配
                                    </span>
                                </th>
                                <th>
                                    <span style="float: left">
                                        处理中
                                    </span>
                                </th>
                                <th>
                                    <span style="float: left">
                                        待审核
                                    </span>
                                </th>
                                <th>
                                    <span style="float: left">
                                        已合格
                                    </span>
                                </th>
                                <th>
                                    <span style="float: left">
                                        不合格
                                    </span>
                                </th>
                                <th>
                                    <span style="float: left">
                                        已通过
                                    </span>
                                </th>
                                <th>
                                    <span style="float: left">
                                        完成进度
                                    </span>
                                </th>
                                <th>
                                    <span style="float: left">
                                        通过进度
                                    </span>
                                </th>
                                <th>
                                    <span style="float: left">
                                        回收率
                                    </span>
                                </th>
                                <th>
                                    <span style="float: left">
                                        操作
                                    </span>
                                </th>
                            </tr>

                            </thead>
                            <tbody>
                            <template v-for="project in tableData">
                                <tr class="tr_sign_[[ project.bgcolor ]]">
                                    <td class="action-checkbox">
                                        <input type="checkbox" name="td_checkbox" value="[[ project.project_id ]]">
                                    </td>
                                    <td title="项目ID">[[ project.project_id ]]</td>
                                    <td title="项目名称">[[ project.project_name ]]</td>
                                    <td title="总量">[[ project.total ]]</td>
                                    <td title="已回收">[[ project.YiHuiShou ]]</td>
                                    <td title="待分配">[[ project.DaiFenPei ]]</td>
                                    <td title="处理中">[[ project.ChuLiZhong ]]</td>
                                    <td title="待审核">[[ project.DaiShenHe ]]</td>
                                    <td title="已合格">[[ project.YiHeGe ]]</td>
                                    <td title="不合格" bgcolor="#b4c32e" v-if="[[ project.BuHeGe ]] != 0 && [[ project.BuHeGe ]] != 0">[[ project.BuHeGe ]]
                                    </td>
                                    <td title="不合格" v-else>[[ project.BuHeGe ]]</td>
                                    <td title="已通过">[[ project.YiTongGuo ]]</td>
                                    <td title="完成进度">
                                        <div class="progress active">
                                            <div class="progress-bar progress-bar-primary progress-bar-striped"
                                                 role="progressbar" aria-valuenow="20" aria-valuemin="0"
                                                 aria-valuemax="100"
                                                 style="width: [[ project.WanChengJinDu ]];">
                                                <span style="color: black;">[[ project.WanChengJinDu ]]</span>
                                            </div>
                                        </div>
                                    </td>
                                    <td title="通过进度">
                                        <div class="progress active">
                                            <div class="progress-bar progress-bar-success progress-bar-striped"
                                                 role="progressbar" aria-valuenow="20" aria-valuemin="0"
                                                 aria-valuemax="100"
                                                 style="width: [[ project.TongGuoJinDu ]];">
                                                <span style="color: black;">[[ project.TongGuoJinDu ]]</span>
                                            </div>
                                        </div>
                                    </td>
                                    <td title="回收率">
                                        <div class="progress active">
                                            <div class="progress-bar progress-bar-danger progress-bar-striped"
                                                 role="progressbar" aria-valuenow="20" aria-valuemin="0"
                                                 aria-valuemax="100"
                                                 style="width: [[ project.HuiShouLv ]];">
                                                <span style="color: black;">[[ project.HuiShouLv ]]</span>
                                            </div>
                                        </div>
                                    </td>
                                    <td title="操作" class="btn-group">
                                        {% if user.is_superuser %}
                                        <a class="btn btn-info btn-xs"
                                           href="{% url 'task:project_detail' 'manage' %}?pid=[[ project.project_id ]]">
                                            详情
                                        </a>
                                        <a class="btn btn-info btn-xs"
                                           href="{% url 'task:task_audit' %}?project_id=[[ project.project_id ]]">
                                            抽查
                                        </a>
                                        {% else %}
                                        <a class="btn btn-info btn-xs"
                                           href="{% url 'task:project_detail_agent' 'manage' %}?pid=[[ project.project_id ]]">
                                            详情
                                        </a>
                                        {% endif %}
                                    </td>
                                </tr>
                            </template>
                            </tbody>
                        </table>
                        <p class="" id="paginator">
                            <a class="btn btn-default btn-xs" onclick="toPage('home')">首页</a>
                            <a class="btn btn-default btn-xs" onclick="toPage('last')">上一页</a>
                            <a class="btn btn-default btn-xs" onclick="toPage('next')">下一页</a>
                            <input type="text" id="page-judge" style="width: 30px;height:20px; margin-left: 20px"
                                   onkeyup="toPage('judge')">
                            <a class="btn btn-default btn-xs" onclick="toPage('end')">尾页</a>
                            <a class="btn btn-default btn-xs" onclick="toPage('judge')">跳页</a>
                            <span>共{{ pageCount }}页</span>
                        </p>
                    </div>
                    <!-- /.box-footer -->
                    <div class="box-footer">
                        <button class="btn btn-primary no-display" id="submit_button">确认</button>
                        <button type="button" class="btn btn-primary" id="save_submit" name="_save"
                                style="display: none">sure
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!--标记-->
<div class="modal fade" id="pmark" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="top:40%">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div id="pmarkMsgBoxMsg" class="modal-body" style="overflow:auto;text-align:center;">
                <form>
                    <p>
                        <label for="mred">
                            需修改&nbsp;&nbsp;&nbsp;&nbsp;
                            <span class="pmark_color" style="background: red"></span>
                        </label>
                        <input type="radio" name="pmark_color" value="red" id="mred">
                    </p>
                    <p>
                        <label for="mForestGreen">
                            已通过&nbsp;&nbsp;&nbsp;&nbsp;
                            <span class="pmark_color" style="background: ForestGreen"></span>
                        </label>
                        <input type="radio" name="pmark_color" value="ForestGreen" id="mForestGreen">
                    </p>
                    <p>
                        <label for="mBlueViolet">
                            今天审核
                            <span class="pmark_color" style="background: BlueViolet"></span>
                        </label>
                        <input type="radio" name="pmark_color" value="BlueViolet" id="mBlueViolet">
                    </p>
                    <p>
                        <label for="mAqua">
                            明天审核
                            <span class="pmark_color" style="background: Aqua"></span>
                        </label>
                        <input type="radio" name="pmark_color" value="Aqua" id="mAqua">
                    </p>
                    <p>
                        <label for="mDarkorange">
                            其&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;他
                            <span class="pmark_color" style="background: Darkorange"></span>
                        </label>
                        <input type="radio" name="pmark_color" value="Darkorange" id="mDarkorange">
                    </p>
                </form>
            </div>
            <div class="modal-footer" style="text-align:center;">
                {% if user.is_superuser %}
                <button type="button" class="btn btn-default" onclick="projectMark()" data-dismiss="modal">
                    确认
                </button>
                {% endif %}
                <button type="button" class="btn btn-default" data-dismiss="modal">
                    取消
                </button>
            </div>
        </div>
    </div>
</div>

<script>
    function changeColor(id, color) {
        //$(id).parent().parent().parent().children().children().children().find("li[color='green']");
        $(id).parent().parent().addClass("active");
        $(id).children().css("color", color);
    }

    changeColor('#project_statistics', '#00FF7F');
    changeColor('#project_statistics_agent', '#00FF7F');
</script>
<script>
    // 时间input
    laydate.render({
        elem: '#allocation_flag',
        range: true
    });

    // 获取当前url参数值
    function GetQueryValue1(queryName) {
        var reg = new RegExp("(^|&)" + queryName + "=([^&]*)(&|$)", "i");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) {
            return decodeURI(r[2]);
        } else {
            return null;
        }
    }

    // 翻页
    function toPage(type) {
        location_url = window.location.href;
        var page_num = GetQueryValue1('pageNum');
        if (!page_num) {
            page_num = 1
        }
        if (type === 'last') {
            if (Number(page_num) > 1) {
                page_num = Number(page_num) - 1
            } else {
                page_num = 1
            }
        } else if (type === 'next') {
            page_num = Number(page_num) + 1
        } else if (type === 'judge') {
            page_num = $("#page-judge").val()
        } else if (type === 'home') {
            page_num = 1
        } else if (type === 'end') {
            page_num = '{{ pageCount }}'
        } else {
            alert('参数错误');
            return false;
        }
        var page = 'pageNum=' + page_num;
        if (location_url.indexOf('pageNum') !== -1) {
            window.location.href = location_url.replace(/pageNum=\d+/, page)
        } else {
            if (location_url.indexOf('?') === -1) {
                window.location.href = location_url + '?' + page
            } else {
                window.location.href = location_url + '&' + page;
            }
        }
    }
</script>
<script>
    Vue.config.delimiters = ["[[", "]]"];
    var mianVue = new Vue({
        el: "#main",
        data: {
            tableData: []
        }
    });

    "{% for project in project_list %}"
    mianVue.tableData.push(
        {
            "bgcolor": "{{ project.bgcolor }}",
            "project_id": "{{ project.project_id }}",
            "project_name": "{{ project.project_name }}",
            "total": "{{ project.total }}",
            "YiHuiShou": "{{ project.1|default:0 }}",
            "DaiFenPei": "{{ project.2|default:0 }}",
            "ChuLiZhong": "{{ project.3|default:0 }}",
            "DaiShenHe": "{{ project.4|default:0 }}",
            "YiHeGe": "{{ project.5|default:0 }}",
            "BuHeGe": "{{ project.6|default:0 }}",
            "ShenQingHuiShou": "{{ project.11|default:0 }}",
            "YiTongGuo": "{{ project.14|default:0 }}",
            "WanChengJinDu": (function () {
                var num = ((parseInt("{{ project.5|default:0 }}") + parseInt("{{ project.14|default:0 }}")) / (parseInt("{{ project.total }}") - parseInt("{{ project.1|default:0 }}"))) * 100;
                return num.toFixed(2) + '%'
            })(),
            "TongGuoJinDu": (function () {
                var num = (parseInt("{{ project.14|default:0 }}") / (parseInt("{{ project.total }}") - parseInt("{{ project.1|default:0 }}"))) * 100;
                return num.toFixed(2) + '%'
            })(),
            "HuiShouLv": (function () {
                var num = (parseInt("{{ project.1|default:0 }}") / parseInt("{{ project.total }}")) * 100;
                return num.toFixed(2) + "%"
            })()
        }
    );
    "{% endfor %}"
</script>
<script>
    // 选中全部
    function checkAll(obj) {
        if ($(obj).is(":checked")) {
            $("input[name='td_checkbox']").prop("checked", true);
        } else {
            $("input[name='td_checkbox']").prop("checked", false);
        }
    }

    // 0-清除，1-标记，2-清除全部标记
    function projectMark(flag=1) {
        var _pids = [];
        $("input[name='td_checkbox']:checked").each(
            function () {
                _pids.push($(this).val());
            }
        );
        if (!_pids) {
            alert('没有选中项目');
            return false;
        }
        var project_ids = _pids.join();
        var pbgcolor = $("input[name='pmark_color']:checked").val();
        $.ajax({
            type: "POST",
            url: "{% url 'task:project_mark' %}",
            data: {
                project_ids: project_ids,
                pbgcolor: pbgcolor,
                flag: flag,
                csrfmiddlewaretoken: "{{ csrf_token }}"
            },
            success: function (response) {
                if (response.code == 0){
                    alert(response.message)
                }
                window.location.reload();
            }
        })
    }
</script>
{% endblock section_content %}
                                                                                                                                                                                                                                                                                                                                                                                   